// SPDX-License-Identifier: GPL-3.0-or-later

import QtQuick
import QtQuick.Layouts
import Fk
import Fk.Pages
import Fk.RoomElement

GraphicsBox {
  id: root
  property var selected_ids: []
  property var ok_options: []
  property var disable_cards: []
  property var cancel_options: []
  property var cards: []
  property int min
  property int max
  property string skill_name: ""
  property string detail_content: ""
  property int result

  title.text: Backend.translate(prompt !== "" ? Util.processPrompt(skill_name) : "$Choice")
  y: root.y-80
  width: 550
  height: cardsList.height + title.height + decontent.height + 35

  Flickable {
    id: decontent
    x:10
    anchors.top:title.bottom
    anchors.topMargin: 10
    contentHeight: 130
    width: parent.width - 10
    height: detail.height - 2
    clip: true
    Text {
      id: detail
      width: parent.width
      // height: parent.height
      text: luatr(detail_content)
      color: "white"
      wrapMode: Text.WordWrap
      font.pixelSize: 16
      textFormat: TextEdit.RichText
    }
  }

  GeneralCardItem {
    anchors.top:decontent.bottom
    anchors.topMargin: cardsList.height / 2 - human.height / 2
    anchors.left:decontent.left
    anchors.leftMargin: 10
    id: human
    name: "caocao"
    visible: name !== ""
  }

  Flickable {
    id: cardsList
    // ScrollBar.vertical: ScrollBar {}
    flickableDirection: Flickable.VerticalFlick
    width: 410
    height: Math.min(120 * cards.length,280)
    contentHeight: 120 * (cards.length+1)
    clip: true

    anchors.top: decontent.bottom
    anchors.topMargin: 1
    anchors.left:human.right
    anchors.leftMargin: 11
  
    Column {
      spacing: 0
      Repeater {
        id: to_select
        model: cards
        delegate : Item {
          id : gensitem
          width: 405
          height: selgens.height + gensrowlay.height

          MetroButton {
            id: selgens
            Layout.fillWidth: true
            text: "选择"
            enabled: true
            textFont.pixelSize: 15
            anchors.top: gensrowlay.bottom
            anchors.topMargin: 5
            anchors.left: gensrowlay.left
            anchors.leftMargin: 30

            onClicked: {
              // result = index;
              root.close();
              // console.log(modelData)
              ClientInstance.replyToServer("",JSON.stringify(modelData)); 
            }
          }

          Flickable {
            id : gensrowlay
            flickableDirection: Flickable.HorizontalFlick
            width: parent.width
            height: 115
            contentWidth: genslist.width 
            clip: true

            RowLayout {
              id : genslist
              spacing: -22
              Repeater {
                model: modelData

                delegate: GeneralCardItem {
                  scale:0.8
                  name: modelData
                  autoBack: false
                  selectable: true
                  onRightClicked: {
                    roomScene.startCheat("GeneralDetail", { generals: [modelData] });
                  }
                }
              }
            }
          }
        }
      }
    }
  }

  // Flickable {
  //   id: choiceContainer
  //   // ScrollBar.horizontal: ScrollBar {}

  //   flickableDirection: Flickable.AutoFlickIfNeeded
  //   width: 400
  //   height: cardsList.height
  //   // anchors.fill: parent
  //   anchors.top:decontent.bottom
  //   // anchors.topMargin: 1
  //   anchors.left:human.right
  //   anchors.leftMargin: 10

  //   contentWidth: cardsList.width
  //   contentHeight: cardsList.height
  //   clip: true

    
  // }

  // Item {
  //   id: buttonArea
  //   anchors.top:choiceContainer.bottom
  //   anchors.topMargin: 5
  //   anchors.left:human.right
  //   anchors.leftMargin: 20
  //   height: 40

  //   Row {
  //     anchors.verticalCenter: parent.verticalCenter
  //     anchors.bottom: parent.bottom
  //     spacing: 8

  //     Repeater {
  //       model: ok_options

  //       MetroButton {
  //         Layout.fillWidth: true
  //         text: Util.processPrompt(modelData)
  //         enabled: root.selected_ids.length >= root.min && root.selected_ids.length <= root.max

  //         onClicked: {
  //           close();
  //           roomScene.state = "notactive";
  //           const reply = JSON.stringify(
  //             {
  //               cards: root.selected_ids,
  //               choice: modelData,
  //             }
  //           );
  //           ClientInstance.replyToServer("", reply);
  //         }
  //       }
  //     }

  //     Repeater {
  //       model: cancel_options

  //       MetroButton {
  //         Layout.fillWidth: true
  //         text: Util.processPrompt(modelData)
  //         enabled: true

  //         onClicked: {
  //           close();
  //           roomScene.state = "notactive";
  //           const reply = JSON.stringify(
  //             {
  //               cards: [],
  //               choice: modelData,
  //             }
  //           );
  //           ClientInstance.replyToServer("", reply);
  //         }
  //       }
  //     }
  //   }
  // }

  function loadData(data) {
    console.log(data)
    skill_name = data[0];
    detail_content = data[1];
    human.name = data[2];
    cards = data[3];

    min = data[4] ?? 1
    max = data[5] ?? 1
    ok_options = data[6] ?? []
    cancel_options = data[7] ?? []
    disable_cards = data[8] ?? []
  }
}
